// index.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { ITabe } from './type/index'

export interface State {
  count: number,
  collapse: boolean,
  tabsList:Array<ITabe>,//规范了tabsList数组里必须是ITabe类型
  lang:string
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0,
    collapse: false,
    tabsList:[],
    lang:localStorage.getItem('lang') || 'zh'
  },
  mutations: {
      setCount:(state:State,count:number)=>{
          state.count = count
      },
      //设置collapes
      setCollapse:(state:State,collapse: boolean)=>{
        state.collapse = collapse
      },
      //tabe
      addTabe:(state: State,tab:ITabe)=>{
        //判断是否存在，如果不存在，才放入
        if(state.tabsList.some(item=>item.path === tab.path)) return;
        state.tabsList.push(tab)//从后面放入
      },
      changLang (state: State,lang: string) {
        state.lang = lang
      }
  },
  getters: {
      getCount(state:State) {
          return state.count
      },
      //获取collapes
      getCollapse:(state:State)=>{
        return state.collapse
      },
      getTabs:(state:State)=>{
        return state.tabsList
      },
      getLang:(state:State)=>{
        return state.lang
      }
  }
})

// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}